<style lang="scss" scoped>
    @import '~@/scss/public.scss';
    .qrcode{
        width: 140px;
        height: 140px;
        margin-bottom: 20px;
    }
    .gap{
        position: relative;
        width: 300px;
        @mixin gap{
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            z-index: 1;
        }
        &::after{
            @include gap;
            left: 0;
            transform: translate3d(-50%,-50%,0);
        }
        &::before{
            @include gap;
            right: 0;
            transform: translate3d(50%,-50%,0);
        }
    }
    .bg-blue{
        @include color-gradient(#0c72e0,#2c95f0,white,left);
    }
    .bg-red{
        @include color-gradient(#ed454f,#ed459a,white,left);
    }
</style>
<template>
    <div class="flex">

        <!-- left box -->
        <div class="flex-1 p20">
            <div class="mb20">
                <span class="mr50">您当前的积分: <i class="f-color-orange">{{userInfo.score}}</i></span>
                <span>
                    <el-button @click="checkIn" type="default" size="small" :disabled="isCheckedIn">签到</el-button>
                    <span v-if="isCheckedIn" class="f-color-grey f10 ml10">今日已签到</span>
                    <span v-else class="f-color-grey f10 ml10">每日签到获积分</span>
                </span>
            </div>

            <navbar></navbar>

            <ui-title>社群</ui-title>
            <div class="flex row-around">
                <div class="text-center" v-if="shequn.qq1">
                    <img :src="shequn.qq1.pic" class="qrcode">
                    <div class="f14">官方QQ群一</div>
                    <div class="mb20 f12">群号: {{shequn.qq1.name}}</div>
                    <!-- <el-button style="width:100%" type="primary">我已加入</el-button> -->
                </div>
                <div class="text-center" v-if="shequn.weibo">
                    <img :src="shequn.weibo.pic" class="qrcode">
                    <div class="f14">官方微博</div>
                    <div class="mb20 f12">群号: {{shequn.weibo.name}}</div>
                    <!-- <el-button style="width:100%" type="primary">我已加入</el-button> -->
                </div>
                <div class="text-center" v-if="shequn.weixin1">
                    <img :src="shequn.weixin1.pic" class="qrcode">
                    <div class="f14">官方微信</div>
                    <div class="mb20 f12">群号: {{shequn.weixin1.name}}</div>
                    <!-- <el-button style="width:100%" type="primary">我已加入</el-button> -->
                </div>
            </div>
            <!-- <div class="f10 f-color-grey mt20 mb20 text-center">加群成功后，点击我已加入按钮，即可获得5积分</div> -->

            <ui-title>站内信</ui-title>
            <div @click="openMessage(item.contentget)" v-for="item in messageLIst" class="ml10 mr50 pt10 pb10 ui-border-bottom flex col-center row-between">
                <span>{{item.titleget}}</span>
                <span>{{item.pubish_time}}</span>
            </div>
        </div>

        <!-- right box -->
        <div class="flex-1 p20">
            <div class="mb20">您当前等级: <i class="f-color-orange">{{userInfo.title_info && userInfo.title_info.name || '无'}}</i></div>
            <p>领取彩金</p>
            <div class="gap bg-blue flex row-around p20 mr15 mb20">
                <span>领取金额
                    <div class="f18 mt5 text-center" >{{statisticalData.drawnmoney}}元</div>
                </span>
                <span>领取数量
                    <div class="f18 mt5 text-center">{{statisticalData.drawnum}}个</div>
                </span>
            </div>
            <p>发布彩金</p>
            <div class="gap bg-gradient flex row-around p20 mr15 mb20">
                <span>发布金额
                    <div class="f18 mt5 text-center">{{statisticalData.pushMoney}}元</div>
                </span>
                <span>发布数量
                    <div class="f18 mt5 text-center">{{statisticalData.pushNum}}个</div>
                </span>
            </div>
            <p>发布文章</p>
            <div class="gap bg-red flex column column-row-center column-col-center p20 mr15" style="height:90px">
                <div class="f18 mt5 text-center">{{statisticalData.postsnum}}篇</div>
            </div>
        </div>

        <el-dialog title="站内信" :visible.sync="messageVisible" size="tiny">
            <div v-html="opendMsg"></div>
            <span slot="footer">
                <el-button type="primary" @click="messageVisible = false">知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import navbar from '@/views/彩金宝/彩金菜单'
    export default {
        components:{
            navbar,
        },
        data(){
            return {
                isCheckedIn:false,
                statisticalData:{},
                shequn:{},
                messageLIst:[],
                opendMsg:'',
                messageVisible:false
            }
        },
        computed:{
            userInfo(){
                return this.$store.state.userInfo
            },
        },
        methods:{
            checkIn(){//签到
                this.$http.get('index.php?g=home&m=users&a=checkIn')
                .then(({data})=>{
                    console.log('签到',data)
                    data.msg && this.$message(data.msg)
                    if (data.code===1) {
                        this.isCheckedIn=true
                    }
                }) 
            },
            openMessage(html){
                this.messageVisible = true
                this.opendMsg = html
            }
        },
        created(){
            // 检测签到
            this.$http.get('index.php?g=home&m=Users&a=isCheckIn')
            .then(({data})=>{
                if (data.code===1) {
                    this.isCheckedIn=true
                }else{
                    this.isCheckedIn=false
                }
            })

            // 当前用户的统计数据
            this.$http.get('index.php?g=home&m=users&a=get_coupon_num')
            .then(({data})=>{
                // console.log('当前用户的统计数据',data)
                if (data.code===1) {
                    this.statisticalData = data.data
                }
            })

            // 社群
            this.$http.get('index.php?g=home&m=index&a=community_list', {
                params:{
                    
                }
            })
            .then(({data})=>{
                console.log('社群', data)
                if (data.code==1) {
                    this.shequn = data.data
                }
            })

            // 站内信
            this.$http.get('index.php?g=home&m=Message&a=get_lists', {
                params:{
                    page_size:5
                }
            })
            .then(({data})=>{
                console.log('站内信',data)
                if (data.code==1) {
                    this.messageLIst = data.data
                }
            })
        },
    }
</script>